Виджеты. Цветовая тема приложения

➡️ Скачать презентацию. Flutter Цветовая Тема
➡️ Ссылка на репозиторий с кодом этого урока

Виджеты для работы с изображениями

Добавление изображений в проект
Начнем с папки assets. Изображения будем грузить из этой директории в нашем проекте.

Теперь нужно правильно настроить конфигурационный файл pubspec.yaml и добавить сами изображения.

1.     Переходим в файл pubspec.yaml
2.     Ищем строку   #   - images/a_dot_burr.jpeg
3.     Убираем комментарии (символ #) и пишем путь папки с изображениями
4.     Например assets/images/
5.     Для вложенных элементов обязательно делаем отступ в 2 пробела

Обязательно потом нужно сохранить изменения в файле pubspec.yaml и выполнить команду в консоле flutter pub get или нажать на иконку внутри VSCode

6.     Добавим в корне проекта директорию assets/images/ и скопируем изображения

Нажимаем на папке images правой кнопкой мышки и выбираем пункт меню Reveal in File Explorer

Копируем в эту директорию нужные изображения

7.     Приложение при этом нужно обязательно полностью перезагрузить

Виджет Image()

Чтобы добавить изображение из готовых ассетов, используем виджет Image.asset()

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var myColorScheme = ColorScheme.fromSeed(seedColor: Colors.blue);
    return MaterialApp(
      title: "Hello Flutter App",
      theme: ThemeData(
        colorScheme: myColorScheme,
        appBarTheme: AppBarTheme(
          backgroundColor: myColorScheme.inversePrimary,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Hello Flutter App"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 👉 Виджет для загрузки изображения из асетов
              Image.asset(
                "assets/images/roll.png", // 👉 Путь до изображения
                width: 250, // 👉 Размер изображения
              ),
              const Text(
                "Вкусные Роллы",
                style: TextStyle(fontSize: 24), // Размер шрифта
              ),
              ElevatedButton(
                onPressed: () {
                  // При нажатии на кнопку вывести в консоль сообщение
                  print("Вы купили роллы! Спасибо за заказ!");
                }, 
                child: const Text("Купить"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
                  

Git + GitFlic

Делаем add commit и push

git add .
git commit -m "Добавили изображения"
git push
                  

Через VSCode нажимаем Sync Changes